<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>QQ音乐页面示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft Yahei", sans-serif;
        }
        .header {
            display: flex;
            align-items: center;
            padding: 10px 20px;
        }
        .logo {
            width: 40px;
            height: 40px;
            background-color: #3bf538;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: bold;
            margin-right: 10px;
        }
        .title {
            font-size: 20px;
            font-weight: bold;
        }
        .section {
            padding: 20px;
        }
        .section-title {
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
        }
        .tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .tab {
            padding: 8px 15px;
            cursor: pointer;
            color: #666;
        }
        .tab.active {
            color: #2d8cf0;
            font-weight: bold;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
        }
        .item {
            text-align: center;
        }
        .item-img {
            width: 100%;
            height: auto;
            margin-bottom: 10px;
        }
        .item-desc {
            font-size: 14px;
            color: #666;
        }
        .new-song-section .grid {
            grid-template-columns: repeat(3, 1fr);
        }
        .new-song-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .new-song-img {
            width: 60px;
            height: 60px;
            margin-right: 10px;
        }
        .new-song-info {
            flex: 1;
            text-align: left;
        }
        .new-song-name {
            font-size: 16px;
            margin-bottom: 5px;
        }
        .new-song-artist {
            font-size: 14px;
            color: #999;
        }
        .new-song-duration {
            font-size: 14px;
            color: #999;
        }
        .play-all {
            margin-bottom: 20px;
            margin-left: 20px;
        }
        .mv-section .grid {
            grid-template-columns: repeat(5, 1fr);
        }
        .mv-item-desc {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }
        .mv-item-play {
            font-size: 12px;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="header">
        <img src="图\qqmusic.png">
    </div>

    <div class="section">
        <h2 class="section-title">歌单推荐</h2>
        <div class="tabs">
            <div class="tab active">为你推荐</div>
            <div class="tab">运动</div>
            <div class="tab">网络歌曲</div>
            <div class="tab">思念</div>
            <div class="tab">官方歌单</div>
            <div class="tab">情歌</div>
        </div>
        <div class="grid">
            <div class="item">
                <img src="图\sku-6.jpg" alt="歌单1" class="item-img">
                <div class="item-desc">翻唱女神J.fla | 只唱你最爱的旋律<br>播放量：854.0万</div>
            </div>
            <div class="item">
                <img src="图\sku-6.jpg" alt="歌单2" class="item-img">
                <div class="item-desc">古风女声控，优美旋律为你而来<br>播放量：171.2万</div>
            </div>
            <div class="item">
                <img src="图\sku-6.jpg" alt="歌单3" class="item-img">
                <div class="item-desc">想开一家早橘店，叫早点见面<br>播放量：92.0万</div>
            </div>
            <div class="item">
                <img src="图\sku-6.jpg" alt="歌单4" class="item-img">
                <div class="item-desc">好评999+英文歌！轻松解压100%<br>播放量：12391.0万</div>
            </div>
            <div class="item">
                <img src="图\sku-6.jpg" alt="歌单5" class="item-img">
                <div class="item-desc">书房背景乐 沉浸于字里行间的时光<br>播放量：303.3万</div>
            </div>
        </div>
    </div>

    <div class="section new-song-section">
        <h2 class="section-title">新歌首发</h2>
        <button class="play-all">播放全部</button>
        <div class="tabs">
            <div class="tab active">最新</div>
            <div class="tab">内地</div>
            <div class="tab">港台</div>
            <div class="tab">欧美</div>
            <div class="tab">韩国</div>
            <div class="tab">日本</div>
        </div>
        <div class="grid">
            <div class="new-song-item">
                <img src="图\sku-6.jpg" alt="歌曲1" class="new-song-img">
                <div class="new-song-info">
                    <div class="new-song-name">Sabotage</div>
                    <div class="new-song-artist">Bebe Rexha</div>
                </div>
                <div class="new-song-duration">02:56</div>
            </div>
            <div class="new-song-item">
                <img src="图\sku-6.jpg" alt="歌曲2" class="new-song-img">
                <div class="new-song-info">
                    <div class="new-song-name">如果人人都音乐</div>
                    <div class="new-song-artist">张蔷</div>
                </div>
                <div class="new-song-duration">03:46</div>
            </div>
            <div class="new-song-item">
                <img src="图\sku-6.jpg" alt="歌曲3" class="new-song-img">
                <div class="new-song-info">
                    <div class="new-song-name">你就不要想起我</div>
                    <div class="new-song-artist">R1SE-赵磊</div>
                </div>
                <div class="new-song-duration">04:30</div>
            </div>
            <div class="new-song-item">
                <img src="图\sku-6.jpg" alt="歌曲4" class="new-song-img">
                <div class="new-song-info">
                    <div class="new-song-name">软肋</div>
                    <div class="new-song-artist">李宇春</div>
                </div>
                <div class="new-song-duration">04:17</div>
            </div>
            <div class="new-song-item">
                <img src="图\sku-6.jpg" alt="歌曲5" class="new-song-img">
                <div class="new-song-info">
                    <div class="new-song-name">一爱如故《长歌行》电视剧插曲</div>
                    <div class="new-song-artist">摩登兄弟刘宇宁</div>
                </div>
                <div class="new-song-duration">03:55</div>
            </div>
            <div class="new-song-item">
                <img src="图\sku-6.jpg" alt="歌曲6" class="new-song-img">
                <div class="new-song-info">
                    <div class="new-song-name">向宿命挥拳的人《新斗罗大陆...</div>
                    <div class="new-song-artist">阿云嘎</div>
                </div>
                <div class="new-song-duration">04:00</div>
            </div>
            <div class="new-song-item">
                <img src="图\sku-6.jpg" alt="歌曲7" class="new-song-img">
                <div class="new-song-info">
                    <div class="new-song-name">花好月圆</div>
                    <div class="new-song-artist">陈奕迅</div>
                </div>
                <div class="new-song-duration">02:34</div>
            </div>
            <div class="new-song-item">
                <img src="图\sku-6.jpg" alt="歌曲8" class="new-song-img">
                <div class="new-song-info">
                    <div class="new-song-name">Renegades《浪客剑心 最终...</div>
                    <div class="new-song-artist">ONE OK ROCK (ワンオクロッ...</div>
                </div>
                <div class="new-song-duration">04:04</div>
            </div>
            <div class="new-song-item">
                <img src="图\sku-6.jpg" alt="歌曲9" class="new-song-img">
                <div class="new-song-info">
                    <div class="new-song-name">驯化者</div>
                    <div class="new-song-artist">陈俊豪 / 陈雨浓 / TGM-高...</div>
                </div>
                <div class="new-song-duration">03:28</div>
            </div>
        </div>
    </div>

    <div class="section mv-section">
        <h2 class="section-title">MV</h2>
        <div class="tabs">
            <div class="tab active">精选</div>
            <div class="tab">内地</div>
            <div class="tab">韩国</div>
            <div class="tab">港台</div>
            <div class="tab">欧美</div>
            <div class="tab">日本</div>
        </div>
        <div class="grid">
            <div class="item">
                <img src="图\sku-6.jpg" alt="MV1" class="item-img">
                <div class="mv-item-desc">向宿命挥拳的人《新斗罗大陆...</div>
                <div class="mv-item-play">♪ 8002</div>
            </div>
            <div class="item">
                <img src="图\sku-6.jpg" alt="MV2" class="item-img">
                <div class="mv-item-desc">雨</div>
                <div class="mv-item-play">♪ 3334</div>
            </div>
            <div class="item">
                <img src="图\sku-6.jpg" alt="MV3" class="item-img">
                <div class="mv-item-desc">一爱如故《长歌行》电视剧插曲</div>
                <div class="mv-item-play">♪ 4.2万</div>
            </div>
            <div class="item">
                <img src="图\sku-6.jpg" alt="MV4" class="item-img">
                <div class="mv-item-desc">我很好骗</div>
                <div class="mv-item-play">♪ 11万</div>
            </div>
            <div class="item">
                <img src="图\sku-6.jpg" alt="MV5" class="item-img">
                <div class="mv-item-desc">追梦时学会飞行《梦华传》主...</div>
                <div class="mv-item-play">♪ 1483</div>
            </div>
            <div class="item">
                <img src="图\sku-6.jpg" alt="MV6" class="item-img">
                <div class="mv-item-desc">What's Wrong With Me (Punk V...</div>
                <div class="mv-item-play">♪ 20.2万</div>
            </div>
            <div class="item">
                <img src="图\sku-6.jpg" alt="MV7" class="item-img">
                <div class="mv-item-desc">Let's Party《和平精英》2周年庆...</div>
                <div class="mv-item-play">♪ 6.6万</div>
            </div>
            <div class="item">
                <img src="图\sku-6.jpg" alt="MV8" class="item-img">
                <div class="mv-item-desc">须贺乃糎</div>
                <div class="mv-item-play">♪ 2861</div>
            </div>
            <div class="item">
                <img src="图\sku-6.jpg" alt="MV9" class="item-img">
                <div class="mv-item-desc">에필로그 (Epilogue)</div>
                <div class="mv-item-play">♪ 7955</div>
            </div>
            <div class="item">
                <img src="图\sku-6.jpg" alt="MV10" class="item-img">
                <div class="mv-item-desc">圭贤《Coffee》MV</div>
                <div class="mv-item-play">♪ 1.5万</div>
            </div>
        </div>
    </div>
</body>
</html>




